<template>
	<view class="store-table">
		<u-row customStyle="padding: 20rpx;color: #999999;background: #F4F5F9;font-size: 26rpx;">
			<u-col v-for="(item, index) in titleList" :key="index" :span="item.span">
				{{item.name}}
			</u-col>
		</u-row>
		<u-empty v-if="!dataList.length" marginTop="30rpx" mode="list" icon="/static/null.png">
		</u-empty>
		<u-collapse v-else :border="false">
			<u-collapse-item v-for="(item, index) in dataList" :key="index" :name="index">
				<view slot="title" class="u-page__item__title__slot-title" style="width: 100%">
					<u-row customStyle="font-size: 22rpx;color: #333333;">
						<u-col v-for="(data, i) in item.list" :key="i" :span="titleList[i].span">
							<!-- 							<text v-show="data.type">{{data.value ? data.value.split(' ')[0] : '--'}}</text>
							<text v-show="!data.type">{{data.value || '--'}}</text> -->
							<text> {{formatTime(data)}} </text>
						</u-col>
					</u-row>
				</view>
				<view class="u-collapse-content">
					<!-- 列表 content -->
					<u-row :customStyle="contentStyle" v-for="(data, i) in item.content" :key="i">
						<u-col :span="data.span || '3'">
							{{data.label}}:
						</u-col>
						<u-col :span="data.span2 || '9'">
							{{data.value||'--'}}
						</u-col>
					</u-row>
					<!-- 列表内部 detail -->
					<view class="detail" v-if="item.detail">
						<u-row :customStyle="contentStyle" v-for="(data, i) in item.detail" :key="i">
							<u-col :span="data.span || '3'">
								{{data.label}}:
							</u-col>
							<u-col :span="data.span2 || '9'">
								{{data.value||'--'}}
							</u-col>
						</u-row>
					</view>
					<!-- 图片 fileList -->
					<view v-if="item.fileList">
						<u-upload :fileList="item.fileList" name="fileList" multiple :maxCount="item.fileList.length"
							:previewFullImage="true" :deletable="false" height="40" width="40"></u-upload>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => {
					return [{
						list: [{
								value: '2023-06-13'
							},
							{
								value: '电池充电'
							},
							{
								value: '张三'
							}
						],
						content: [{
								label: '更换周期',
								value: '12个月'
							},
							{
								label: '下次更换',
								value: '2023-06-13'
							},
						],
						detail: [{
								label: '借出人',
								value: '白起'
							},
							{
								label: '联系方式',
								value: '18298782738'
							},
						],
						fileList: [{
								url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
							},
							{
								url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
							}
						]
					}]
				}
			},
			titleList: {
				type: Array,
				default: () => {
					return [{
							name: '操作时间',
							span: '5'
						},
						{
							name: '操作方式',
							span: '4'
						},
						{
							name: '操作人',
							span: '3'
						},
					]
				}
			}
		},
		data() {
			return {
				contentStyle: 'font-size: 25rpx;color: #909091;margin-bottom: 6px;'
			}
		},
		methods: {
			formatTime(data) {
				if (!data.value) {
					return '--'
				}
				if (!data.type) {
					return data.value
				}
				return data.value.split(' ')[0]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store-table {
		background-color: #fff;

		::v-deep .u-collapse-item {
			position: relative;
		}

		::v-deep .u-cell__right-icon-wrap--down {
			position: absolute;
			right: 20rpx;
		}

		::v-deep .u-collapse-item__content__text {
			padding-bottom: 0;
		}

		.detail {
			background: #F7F9FC;
			border-radius: 5rpx;
			padding: 10px;
			margin-bottom: 6px;
		}

		.u-row {
			align-items: flex-start !important;
		}
	}
</style>